<div class="layout_content">
    <header class="demo-header" style="padding-top: 10px;">
        <div class="titleLeft flt">
            <a href="javascript:history.go(-1);">
                <img src="<?php echo WEBIMG; ?>/back.png" width="35px" height="33px">
            </a>
        </div>
        <div class="titleRight flt text-center">新品上架</div>
    </header>
    <div class="product-list newproduct" style="padding-bottom: 0;">
        <?php if (isset($ProductData)) { ?>
            <?php foreach ($ProductData as $key => $product) { ?>
                <div>
                    <img src="<?php echo $product['icon_url']; ?>">
                    <div class="flt pline">
                        <p class="product">
                            <a href="<?php echo WEBROOT . '/product/detail/id/' . $product['id'] . '.html' ?>">
                                <?php echo $product['name']; ?>
                            </a>
                        </p>
                        <p class="guige"><?php echo $product['mass_packing'] ?></p>
                        <p class="price"><?php echo $product['channel_price']; ?></p>
                    </div>
                    <div class="flt cart">
                        <a href="javascript:;" onclick="showSpec(this)">
                            <img src="<?php echo WEBIMG; ?>/addcart_normal.png"/>
                        </a>
                        <div class="pro_detail" style="display: none;">
                            <div class="pro_img">
                                <?php echo $product['icon_url']; ?>
                            </div>
                            <div class="pro_name">
                                <?php echo $product['name']; ?>
                            </div>
                            <div class="pro_price">
                                <?php echo $product['channel_price']; ?>
                            </div>
                            <div class="pro_spec">
                                <?php echo $product['mass_packing']; ?>
                            </div>
                            <div class="spec_list">
                                <?php foreach ($product['sku_info'] as $vvv) { ?>
                                    <div class="sku_box">
                                        <div class="flt shuxing-adjust">
                                            <p class="product"><?php echo $vvv['attr']; ?></p>
                                        </div>
                                        <div class="flt cart" style="width: 8%;padding-top:5px;">
                                            <label onclick="selectPro(this)"
                                                   rel="<?php echo $vvv['product_id'] . '_' . $vvv['id']; ?>"></label>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
                </div>
            <?php } ?>
        <?php } ?>
    </div>
</div>


<div id="guige">
    <div class="product-list newproduct" style="padding-bottom: 40px;border: none;">
        <div>
            <img src="" style="width: 70px;" id="pro_img"/>
            <div class="flt pline" style="line-height: 18px;padding-top: 0;">
                <p class="product" id="pro_name"></p>
                <p class="guige" id="pro_spec"></p>
                <p class="price">￥<span id="pro_price"></span></p>
            </div>
        </div>
        <div class="shuxing" id="slectradio" style="overflow: auto;max-height: 78px;">
            <p class="product">属性：</p>
            <div id="spec_list"></div>
        </div>

        <div class="flt pline" style="width: 15%;border: none;">
            <p class="product">数量：</p>
        </div>
        <div class="flt text-right" style="width: 85%;padding-right: 3%;box-sizing: border-box;border: none;">
            <div class="inputNum" style="margin-bottom:5px;">
                <span class="minus minadd" onclick="javascript:num_down(this);return false;">-</span>
                <span class="proNum">
                    <input type="text" name="num" id="pro_num" rel="" value="1" autocomplete="off">
                </span>
                <span class="add minadd" onclick="javascript:num_up(this);return false;">+</span>
            </div>
        </div>
    </div>
    <div class="foot-confirm text-center" onclick="addCart();">确定</div>
    <div class="closeicon" onclick="CloseDiv();">
        <img src="<?php echo WEBIMG; ?>/dialog_close.png" style="width: 22px;"/>
    </div>
</div>
<div id="fade" class="black_overlay" onclick="CloseDiv();"></div>

<script type="text/javascript" src="<?php echo WEBJS . '/public.js'; ?>"></script>
<script>
    function num_down(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 1) {
            num = num - 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);
    }
    function num_up(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 0) {
            num = num + 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);
    }
    function showSpec(el) {
        var pro_img = $(el).siblings('.pro_detail').find('.pro_img').html();
        var pro_name = $(el).siblings('.pro_detail').find('.pro_name').html();
        var pro_price = $(el).siblings('.pro_detail').find('.pro_price').html();
        var pro_spec = $(el).siblings('.pro_detail').find('.pro_spec').html();
        var spec_list = $(el).siblings('.pro_detail').find('.spec_list').html();

        $("#pro_img").attr('src', pro_img);
        $("#pro_name").html(pro_name);
        $("#pro_price").html(pro_price);
        $("#pro_spec").html(pro_spec);
        $("#spec_list").html(spec_list);

        ShowDiv();
    }
    function selectPro(el) {
        var key = $(el).attr('rel');
        $("#pro_num").attr('rel', key);

        $(".sku_box").find('label').removeClass('checked');
        $(el).addClass('checked');
    }
    function addCart() {
        var num = $("#pro_num").val();
        var key = $("#pro_num").attr('rel');
        if (key && num) {
            $.ajax({
                url: '/ajax/product/',
                type: 'post',
                dataType: 'json',
                data: {'ajaxdata': 'addCart', 'id': key, 'num': num},
                success: function (response) {
                    Tip(response.message);
                    CloseDiv();
                },
                beforeSend: function () {
                }
            });
        } else {
            Tip('请选择产品参数');
            return false;
        }
    }
</script>